<template>
  <van-nav-bar
    title="商品列表"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <van-card
    v-for="item in products"
    num="1"
    :price="item.price"
    :desc="item.subTitle"
    :title="item.name"
    :thumb="item.img"
    @click="itemClick(item)"
  />
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { productApi } from "@/api/index";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const products = ref([]); //商品列表

const urlParams = reactive({
  categoryId: "",
  name: ""
});
//钩子函数
onMounted(() => {
  if (route.query.categoryId != undefined) {
    urlParams.categoryId = route.query.categoryId.toString();
  }
  if(route.query.name!=undefined){
    urlParams.name=route.query.name.toString()
  }

  callProductApi();
});

//查询商品的api
const callProductApi = () => {
  productApi.selectByCondition
    .call({ categoryId: urlParams.categoryId,name:urlParams.name })
    .then((res: any) => {
      products.value = res;
    });
};

//点击商品卡片跳转到商品详情页面
const itemClick = (item: any) => {
  router.push({ name: "product-detail", query: { id: item.id } });
};

//返回上一级
const onClickLeft = () => history.back();
</script>

<style scoped>
.van-card {
  z-index: 2;
}
</style>